/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text,TextArea, Input,CCell, Table, TableBody, TableRow, TableHead, Cell,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, SelectHookfork, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {calcAverageArrObj, floatInterception, tableSetInp} from "../../../common/tool";
import {RepLink} from "../../common/base";

export const config运行速度=[ ['起速表','起升速度'], ['降速表','下降速度'], ];
interface Props  extends InternalItemProps{
    config: any[];
    sseq?: number;
}
export const itemA速度 = ['速度备注'];
/*'监风速', 结论非法[object Object] 同名报错：该改存储名 监风速o ！
* */
export const MoveSpeednoAv =
    React.forwardRef((
        {children, show, alone = true, refWidth,label,config=config运行速度,sseq=-1}: Props, ref
    ) => {
        const config上 =sseq>=0? config.slice(0, sseq) : config;
        const config下 =sseq>=0? config.slice(sseq) : [];
        const itemA = React.useMemo(() => {
            let items: string[]=[];
            config.forEach(([name,title], i:number)=>{
                items.push(name+'',  name+'r');
            });
            return [...items, ...itemA速度];
        }, [config]);
        const [getInpFilter] = useMeasureInpFilter(null, itemA,);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                <Text variant="h5">{label}</Text>
                <Text variant="h5">{sseq>=0 && '前'} {config上.length} 个项目: 距离（m）{'>>'}</Text>
                <div css={{display: 'flex', margin: 'auto'}}>
                    <div css={{display: 'inline-block', margin: 'auto'}}>
                        {config上.map(([name,title], t: number) => {
                            const avspeed=calcAverageArrObj(inp?.[name],(row)=>{return row?.d/row?.t},2);
                            return <React.Fragment key={t}>
                                <Text variant="h5">{t+1},&nbsp; {title} :</Text>
                                {(new Array(1)).fill(null).map((_, i: number) => {
                                    let o = inp?.[name]?.[i];
                                    const itspd = o?.d / o?.t;
                                    return <div key={i}>
                                        <Text>测量:&nbsp; </Text>
                                        距离
                                        <Input value={o?.d || ''} size={4}
                                               style={{display: 'inline-flex', width: 'unset'}}
                                               onChange={e => tableSetInp(name, i, inp, setInp, 'd', e.currentTarget.value || undefined)}/>
                                        (m)，时间
                                        <Input value={o?.t || ''} size={4}
                                               style={{display: 'inline-flex', width: 'unset'}}
                                               onChange={e => tableSetInp(name, i, inp, setInp, 't', e.currentTarget.value || undefined)}/>
                                        (min)，速度={!isNaN(itspd) && floatInterception(itspd, 2)} (m/min)。
                                    </div>;
                                })}
                                <Text variant="h6" css={{display: 'inline-flex'}}> {title}-检验结果：</Text>
                                <div css={{width: '12rem', display: 'inline-flex', "& > div": {width: '100%'}}}>
                                    <SelectHookfork value={(inp?.[name + 'r']) || ''}
                                                    onChange={e => setInp({...inp, [name + 'r']: e.currentTarget.value || undefined})}/>
                                </div>
                            </React.Fragment>;
                        })}
                    </div>
                </div>
                {sseq>=0 && <>
                    <Text variant="h5">后 {config下.length} 个项目: 圈数(r) {'>>'}</Text>
                    <div css={{display: 'flex', margin: 'auto'}}>
                        <div css={{display: 'inline-block', margin: 'auto'}}>
                            {config下.map(([name,title], t: number) => {
                                const avspeed=calcAverageArrObj(inp?.[name],(row)=>{return row?.d/row?.t},1);
                                return <React.Fragment key={t}>
                                    <Text variant="h5">{sseq+t+1},&nbsp; {title} :</Text>
                                    {(new Array(1)).fill(null).map((_, i: number) => {
                                        let o = inp?.[name]?.[i];
                                        const itspd = o?.d / o?.t;
                                        return <div key={i}>
                                            <Text>&nbsp; {i + 1} 次: </Text>
                                            圈数
                                            <Input value={o?.d || ''} size={4}
                                                   style={{display: 'inline-flex', width: 'unset'}}
                                                   onChange={e => tableSetInp(name, i, inp, setInp, 'd', e.currentTarget.value || undefined)}/>
                                            (r)，时间
                                            <Input value={o?.t || ''} size={4}
                                                   style={{display: 'inline-flex', width: 'unset'}}
                                                   onChange={e => tableSetInp(name, i, inp, setInp, 't', e.currentTarget.value || undefined)}/>
                                            (min)，速度={!isNaN(itspd) && floatInterception(itspd, 1)} (r/min)。
                                        </div>;
                                    })}
                                    <Text variant="h6" css={{display: 'inline-flex'}}>平均速度= {avspeed} r/min, {title}-检验结果：</Text>
                                    <div css={{width: '12rem', display: 'inline-flex', "& > div": {width: '100%'}}}>
                                        <SelectHookfork value={(inp?.[name + 'r']) || ''}
                                                        onChange={e => setInp({...inp, [name + 'r']: e.currentTarget.value || undefined})}/>
                                    </div>
                                </React.Fragment>;
                            })}
                        </div>
                    </div>
                </>}
                备注：
                <TextArea  value={inp?.速度备注 ||''} rows={3}
                           onChange={e => setInp({ ...inp, 速度备注: e.currentTarget.value||undefined}) } />
                {children}
            </InspectRecordLayout>
        );
} );

/**没有 3次的；无平均速度
 * 直接改造 测3次 的版本得来。
 * */
export const MoveSpeednoAvVw= ({children, orc, rep,label,config=config运行速度,sseq=-1} :
                  { orc: any, rep: any,label:any, children?: any,config:any[],sseq?:number}
) => {
    const config上 =sseq>=0? config.slice(0, sseq) : config;
    const config下 =sseq>=0? config.slice(sseq) : [];
    const memopNode=<TableRow>
        <CCell>备注</CCell>
        <Cell colSpan={5}>
            <div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                {orc.速度备注 || '／'}
            </div>
        </Cell>
    </TableRow>;
    return <>
        <div css={{"@media print": {paddingBottom: '7rem', pageBreakInside: 'avoid'}}}>
            <Text variant="h4" css={{marginTop: '1rem',}}>{label}</Text>
        </div>
        <Table id={'MoveSpeed'} fixed={ ["4.5%","%", "15%", "16%", "15%", "12%"] }
               css={{borderCollapse: 'collapse', "@media print": {marginTop: '-7rem'}}} tight miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell colSpan={2}>项目</CCell><CCell>距离(m)</CCell><CCell>时间(min)</CCell>
                    <CCell>速度(m/min)</CCell><CCell>检验结果</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <RepLink ori rep={rep} tag={'MoveSpeed'}>
                    {config上.map(([name, title], t: number) => {
                        return <React.Fragment key={t}>
                            {(new Array(1)).fill(null).map((_, d: number) => {
                                const o = orc?.[name]?.[d];
                                const itspd = o?.d / o?.t;
                                return <TableRow key={d}>
                                    {0 === d && <CCell rowSpan={1} colSpan={2}>{title}</CCell>}
                                    <CCell>{o?.d}</CCell>
                                    <CCell>{o?.t}</CCell>
                                    <CCell>{!isNaN(itspd) && floatInterception(itspd, 2)}</CCell>
                                    {0 === d && <CCell rowSpan={1}>{orc?.[name + 'r']}</CCell>}
                                </TableRow>;
                            })}
                        </React.Fragment>;
                    })}
                    {sseq<0 && memopNode}
                </RepLink>
            </TableBody>
        </Table>
        {sseq>=0 && <>
            <div css={{"@media print": {paddingBottom: '4.5rem', pageBreakInside: 'avoid'}}} />
            <Table fixed={ ["4.5%","%", "15%", "16%", "15%", "12%"] }
                   css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4.5rem'}}} tight miniw={800}>
                <TableHead>
                    <TableRow>
                        <CCell colSpan={2}>项目</CCell><CCell>圈数(r)</CCell><CCell>时间(min)</CCell>
                        <CCell>速度(r/min)</CCell><CCell>检验结果</CCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    <RepLink ori rep={rep} tag={'MoveSpeed'}>
                        {config下.map(([name, title], t: number) => {
                            return <React.Fragment key={t}>
                                {(new Array(1)).fill(null).map((_, d: number) => {
                                    const o = orc?.[name]?.[d];
                                    const itspd = o?.d / o?.t;
                                    return <TableRow key={d}>
                                        {0 === d && <CCell rowSpan={1} colSpan={2}>{title}</CCell>}
                                        <CCell>{o?.d}</CCell>
                                        <CCell>{o?.t}</CCell>
                                        <CCell>{!isNaN(itspd) && floatInterception(itspd, 1)}</CCell>
                                        {0 === d && <CCell rowSpan={1}>{orc?.[name + 'r']}</CCell>}
                                    </TableRow>;
                                })}
                            </React.Fragment>;
                        })}
                        {memopNode}
                    </RepLink>
                </TableBody>
            </Table>
        </>}
        {children}
    </>;
};
